<template>
  <view class="box">
    <view class="box-left" v-if="icon">
      <text class="iconfont icon-zuojiantou" @click="toBack"></text>|
      <text class="iconfont icon-shouye" @click="toHome"></text>
    </view>
    <view class="box-center" :class="{'search-history' : iconSearch }">{{title}}</view>
    
  </view>
</template>

<script>
  export default {
    name:"musichead",
    props:['title','icon','iconSearch'],
    data() {
      return {
        
      };
    },
    methods:{
      toBack(){
        uni.navigateBack()
      },
      toHome(){
        uni.navigateTo({
          url:'/pages/index/index'
        })
      }
    }
  }
</script>

<style scoped>
.box{
  display:flex;
  position: relative;
  width:100%;
  height:75px;
 font-size:16rpx;
 line-height:80px;
  /* text-align: center; */
}
.box-left{
  position:absolute;
  left:8px;
  top:23px; 
  display:flex;
  justify-content: space-evenly;
  width:90px;
  height:30px;
  line-height:30px;
  background: rgb(0,0,0,0.4);
  border-radius: 15px;
}
.box-left{
color:white;  
}
.box-center{
 margin: 0 auto;
 font-size:36rpx;
 color:white;
}
.search-history{
  color:black;
}
</style>